<template>
  <a-modal title="设备号修改审核" :visible="visible" @ok="onOk" @cancel="onCancel" :width="560" centered>
    <a-row>
      <a-col :span="12" style="margin-bottom:10px;">
        <span class="title-label">原设备号：</span>
        {{ data.oldDeviceNo || '-' }}
      </a-col>
      <a-col :span="12" style="margin-bottom:10px;">
        <span class="title-label">修改设备号：</span>
        <span style="font-weight: 500;">{{ data.newDeviceNo || '-' }}</span>
      </a-col>
      <a-col :span="24" style="margin-bottom:10px;">
        <span class="title-label">原设备处理：</span>
        {{ data.processType == 1 ? '报废' : data.processType == 2 ? '解除绑定' : '-' }}
      </a-col>
      <a-col :span="24" style="margin-bottom:10px;">
        <span class="title-label">处理原因：</span>
        {{ data.scrapReason || '-' }}
      </a-col>
    </a-row>
    <a-form-model :model="params" ref="ruleForm" :rules="rules" class="ant-advanced-form">
      <a-form-model-item label="审核结果" prop="status" :colon="false" :labelCol="{ style: 'width:95px' }">
        <a-radio-group v-model="params.status" @change="changeStatus">
          <a-radio :value="1">
            审核通过
          </a-radio>
          <a-radio :value="2">
            审核不通过
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <!-- <a-form-model-item label="原设备处理" prop="processType" :colon="false" :labelCol="{ style: 'width: 95px' }"
        v-if="params.status === 1">
        <a-radio-group v-model="params.processType" @change="changeProcessType">
          <a-radio :value="1">
            原设备报废
          </a-radio>
          <a-radio :value="2">
            原设备解除绑定
          </a-radio>
        </a-radio-group>
      </a-form-model-item> -->
      <!-- <a-form-model-item label="报废原因" prop="scrapReason" :colon="false" :labelCol="{ style: 'width: 95px' }"
        v-if="params.status === 1 && params.processType === 1">
        <div style="position: relative;">
          <a-input type="textarea" v-model.trim="params.scrapReason" :maxLength="50" :rows="4"
            style="width:100%;margin-bottom: 0;" placeholder="请输入报废原因"></a-input>
          <div class="remark-num">
            {{ (params.scrapReason === '' || params.scrapReason === undefined) ? 0 :
            params.scrapReason.length
            }}/50</div>
        </div>
        <div class="warn">
          <a-icon style="color: #f69709; margin-right: 4px" type="info-circle" theme="filled" />报废设备成功后，该设备将不可再使用
        </div>
      </a-form-model-item> -->
      <a-form-model-item label="不通过原因" prop="failedReason" :colon="false" :labelCol="{ style: 'width: 95px' }"
        v-if="params.status === 2">
        <a-input type="textarea" v-model.trim="params.failedReason" :maxLength="100" :rows="4" style="width:100%;"
          placeholder="请输入不通过原因"></a-input>
        <div class="remark-num" style="">
          {{ (params.failedReason === '' || params.failedReason === undefined) ? 0 :
          params.failedReason.length
          }}/100</div>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import {
  deviceChangeAudit,
  deviceChangeAuditDetail
} from '@/services/car'
export default {
  name: 'DeviceChangeAudit',
  data () {
    return {
      data: {},
      params: {
        id: ''
      },
      visible: false,
      rules: {
        status: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
        // processType: [{ required: true, message: '请选择原设备处理方式', trigger: 'change' }],
        // scrapReason: [{ required: true, message: '请输入报废原因', trigger: 'blur' }],
        failedReason: [{ required: true, message: '请输入不通过原因', trigger: 'blur' }]
      }
    }
  },
  methods: {
    open (params) {
      this.params.id = params.id
      this.getDetail()
    },
    async getDetail () {
      const res = await deviceChangeAuditDetail(this.params.id)
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.data = response
        this.visible = true
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    onCancel () {
      this.visible = false
      this.params = {}
      this.$refs.ruleForm.resetFields()
    },
    onOk () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.onSubmit()
        }
      })
    },
    changeStatus (e) {
      delete this.params.processType
      delete this.params.scrapReason
      delete this.params.failedReason
    },
    changeProcessType (e) {
      delete this.params.scrapReason
    },
    async onSubmit () {
      const params = JSON.parse(JSON.stringify(this.params))
      const res = await deviceChangeAudit(params)
      const { msg, isSuccess } = res
      if (isSuccess) {
        this.$message.newFun('审核操作成功', 'success', 3)
        this.$emit('getList')
        this.onCancel()
      } else {
        this.$message.newFun(msg, 'error', 3)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.t1 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #333333;
  line-height: 21px;

  span {
    font-weight: 500;
  }
}

.t2 {
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: #333333;
  line-height: 21px;
}

.remark-num {
  position: absolute;
  right: 10px;
  bottom: -4px;
  color: #999999;
}

.warn {
  margin-top: 12px;
  padding: 0 12px;
  height: 36px;
  line-height: 36px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #606266;
}
</style>
